<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>BFC布局</title>

  <style>
    /* 垂直外边据重合问题 */
    .container {
      overflow: hidden;
      width: 100px;
      height: 100px;
      background-color: red;
    }

    .wrap {
      overflow: hidden;
    }

    .box1 {
      height: 20px;
      margin: 10px 0;
      background-color: green;
    }

    .box2 {
      height: 20px;
      margin: 20px 0;
      background-color: green;
    }

    /* 浮动元素高度坍塌问题 */
    .parent {
      border: 5px solid #fcc;
      width: 100px;
      overflow: hidden;
    }

    .sub {
      float: left;
      width: 60px;
      height: 60px;
      background-color: saddlebrown;
    }



    /* 两栏自适应问题 */
    .column:nth-of-type(1) {
      float: left;
      width: 200px;
      height: 300px;
      margin-right: 10px;
      background-color: purple;
    }

    .column:nth-of-type(2) {
      overflow: hidden;
      height: 300px;
      background-color: red;
    }
  </style>
</head>

<body>
  <!-- 
       参考博客：https://www.cnblogs.com/chen-cong/p/7862832.html

       1.BFC概念
         BFC(Block Formatting Context)块格式化上下文,是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
       
       2.形成BFC的条件
         (1)浮动元素，float(不为none)
         (2)定位元素，position(absolute,fixed)
         (3)display为以下其中之一的值inline-block，table-cell、flex
         (4)overflow(hidden,auto,scroll),除了visible以外的值
        
        3.BFC的特性
          (1)垂直方向上的距离由margin决定
          (2)bfc的区域不会与float的元素区域重叠
          (3)计算bfc的高度时，浮动元素也参与计算
          (4)bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素；外面元素也不会影响里面的元素;

        4.BFC解决的问题
          1.垂直外边距重合问题；
          2.自适应两栏/三栏布局问题；
          3.浮动元素的父元素高度坍塌问题；
     -->

  <!-- 
        问题1：防止margin坍塌：
        垂直外边据重合问题:两个兄弟盒子之间的垂直距离是由他们的外边距所决定的，但不是他们的两个外边距之和，而是以较大的为准
        如何解决外边距重合问题：根据BFC特性第5条，box1和box2都处于另一个bfc即可
    -->
  <h3>问题1：解决垂直外边据重合问题：</h3>
  <div class="container">
    <div class="wrap">
      <div class="box1"></div>
    </div>
    <!-- box2距离box1垂直距离变为30px -->
    <div class="box2"></div>
  </div>

  <!-- 
        问题2：清除浮动，防止高度坍塌
     -->
  <h3>问题2：清除浮动，防止高度坍塌</h3>
  <div class="parent">
    <div class="sub"></div>
  </div>

  <!--
        问题3：自适应两栏布局：
        左边固定宽度，右边不设宽，因此右边的宽度自适应，随浏览器窗口大小的变化而变化。
        若右侧盒子不形成bfc，则会重叠；
      -->
  <h3>问题3：两栏自适应布局问题</h3>
  <div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
</body>

</html>